<template>
  <div>
    <div v-show="articelStatus == false">
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0"> 
            <span>文章管理</span>
            <el-button  type="primary" class="addBtn" @click="goEdit(0)" v-if="userRole.AC_501001">文章</el-button>
            <!--<el-button  type="primary" class="addBtn" @click="sortBtn"><i class="el-icon-sort"></i>排序</el-button>-->
            
            <el-button v-if="tuijians.length>0" type="primary" class="addBtn" @click="editTui"><i class="el-icon-star-off"></i>推荐</el-button>          
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          <el-select  v-model="seachtype" placeholder="请选择" style="width:100px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="sheachValue" style="width:300px" placeholder="输入搜索内容"></el-input>
          <el-button type="primary" @click="seachFun">搜索</el-button>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <my-article v-if="navStatus == -1" ref="children" :navStatus="navStatus" @goEdit="goEdit"></my-article>
        </el-tab-pane>

        <el-tab-pane label="上线" name="second">
          <my-article v-if="navStatus == 0" ref="children" :navStatus="navStatus" @goEdit="goEdit"></my-article>
        </el-tab-pane>

        <el-tab-pane label="下线" name="third">
          <my-article v-if="navStatus == 1" ref="children" :navStatus="navStatus" @goEdit="goEdit"></my-article>
        </el-tab-pane>

      </el-tabs>
    </div>
    <div v-if="articelStatus">
      <editor-articel @breakFun="breakFun" ref="artice" :dataArtice="dataArtice"></editor-articel>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  import myArticle from './myArticle'
  import editorArticel from './Articel/editorArticel'

  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        activeName: 'first',
        checkleng:'',
        navStatus:-1,
        articelStatus:false,
        tuijians:'',
        seachtype:'',
        options:[{
           value:0,
          label:'全部'
        },{
          value:1,
          label:'牙齿矫正'
        },{
          value:2,
          label:'种植牙'
        },{
          value:3,
          label:'口腔健康'
        },{
          value:4,
          label:'儿童口腔'
        }],
        sheachValue:'',
        dataArtice:'', //修改的内容
      }
    },
    components:{
      editorArticel,
      myArticle
    },
    created() {
    },
     mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    methods: {
      
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
      },
      handleClick(tab) {
        this.navStatus = Number(tab.index)-1;
      },
      
      goEdit(val) {
        val ? this.dataArtice = val : this.dataArtice = '';
        this.articelStatus = true;
      },
      //编辑 添加返回方法
      breakFun() {
        this.articelStatus = false;
        this.$refs.children.getlist()
      },
       //搜索
      seachFun(){
        const param = {
          title:this.sheachValue,
          type:this.seachtype
        }
        this.$refs.children.seachData(param)
      },
      checkShowBtn(val) {
        this.checkleng = val
      }
    }
  }
</script>